<template>
  <div v-loading="loading" class="app-container">
    <!-- 收支概况统计表 -->
    <div class="chart">
      <div class="stat" id="total"></div>
      <div class="stat" id="income"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 遮罩
      loading: false,
      // 查询参数
      queryParams: {
        dateRange: undefined,
      },
      totalIncome: 0,
      //总退费
      backIncome: 0,
      //现金支付
      cashIncome: 0,
      //支付宝支付
      alipayIncome: 0,
      //现金退费
      cashRefund: 0,
      //支付宝退费
      alipayRefund: 0,
      //微信支付
      wecharIncome:0,
      //微信退费
      wecharRefund:0,

    };
  },
//初始化加载
  created() {
    this.loadData();
  },
//方法;
  methods: {
    tz(){
      this.$router.push({path:'/statistics/revenue'})
    },

    loadData() {
      // 加载数据--初始化
      this.totalIncome= 0,
          //总退费
      this.backIncome=0,
          //现金支付
      this.cashIncome=0,
          //支付宝支付
      this.alipayIncome=0,
          //现金退费
      this.cashRefund=0,
          //支付宝退费
      this.alipayRefund=0,
          //微信支付
      this. wecharIncome=0,
          //微信退费
      this.wecharRefund=0,

     // console.log(this.queryParams)
      // 加载数据--总收入+退费
        this.$http.post("/orderChargeInfo/statistics/revenue/totalIncome", this.queryParams).then(res=>{
          //console.log(res.data);
          if(res.data.code===200){
            res.data.data.data.forEach(item=>{
              this.totalIncome+=item.totalIncome;
              this.backIncome+=item.backIncome;
              if (item.payType==='0'){
                this.cashIncome+=item.totalIncome;
                this.backIncome1(item)
              }else if (item.payType==='1'){
                this.alipayIncome+=item.totalIncome;
                this.backIncome1(item)
              }else if (item.payType==='2'){
                this.wecharIncome+=item.totalIncome;
                this.backIncome1(item)
              }
            })
          }
          const myChart = echarts.init(document.getElementById("total"));
          // 收入概况统计
          let option = {
            title: {
              text: "收支概况",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "收支概况",
                type: "pie",
                radius: "50%",
                data: [
                  { value: this.totalIncome, name: "总收入" },
                  { value: this.backIncome, name: "总退费" },
                ],

                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: "rgba(0, 0, 0, 0.5)",
                  },
                },
              },
            ],
          };
          myChart.setOption(option);
          myChart.on('click', this.tz)
          const myChart1 = echarts.init(document.getElementById("income"));
          myChart1.on('click', this.tz)
          //收入渠道统计
          let option1 = {
            title: {
              text: "收入渠道",
              left: "center",
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "收入渠道",
                type: "pie",
                radius: "50%",
                data: [
                  { value: this.cashIncome, name: "现金支付" },
                    { value: this.alipayIncome, name: "支付宝支付" },
                    { value: this.wecharIncome, name: "微信支付" },
                    { value: this.cashRefund, name: "现金退费" },
                    { value: this.alipayRefund, name: "支付宝退费" },
                    { value: this.wecharRefund, name: "微信退费" },
                ]
              }
            ]
          }
          myChart1.setOption(option1);
        })
    },
//退费
    backIncome1(item){
      if (item.backType==='0'){
        this.cashRefund+=item.backIncome;
      }else if (item.backType==='1'){
        this.alipayRefund+=item.backIncome;
      }else if (item.backType==='2'){
        this.wecharRefund+=item.backIncome;
      }
    },
  },
};
</script>
<style>
.chart {
  display: flex;
}
.stat {
  width: 350px;
  height: 250px;
}
#income{
  width: 650px;
}
</style>
